<template>
  <div class="wrap">
    <template>
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{$t('message.GearDesignTool.gearType')}}:</label>
        <el-select v-model.number="params.gearType">
          <el-option
              v-for="item in gearOptions"
              :key="item.value"
              :label="item.text"
              :value="item.value"/>
        </el-select>
      </div>
    </template>
    <template>
      <!--模数m（毫米）-->
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{$t('message.GearDesignTool.gearModule')}}:</label>
        <el-select v-model="params.module">
          <el-option
              v-for="item in classParamsGearModule"
              :key="item.value"
              :label="item.text"
              :value="item.value">
          </el-option>
        </el-select>
        <label class="el-form-item__label">mm</label>
      </div>
      <!--齿数z（整数）-->
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{$t('message.GearDesignTool.gearTeethNumber')}}:</label>
        <el-input id="aa" v-model="params.teethNumber"
                  type = "number"
                  step = "1"
                  min = "5"
                  @focus="focus('teethNumber')"
                  @change="changeValue('teethNumber')"/>
      </div>
      <!--压力角a（度数）-->
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{$t('message.GearDesignTool.gearPressureAngle')}}:</label>
        <el-input v-model="params.pressureAngle"
                  type = "number"
                  step = "1"
                  min = "10"
                  @focus="focus('pressureAngle')"
                  @change="changeValue('pressureAngle')"/>
        <label class="el-form-item__label">°</label>
      </div>
      <!--齿宽（毫米）-->
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{$t('message.GearDesignTool.gearWidth')}}:</label>
        <el-input v-model="params.faceWidth"
                  type = "number"
                  step = "1"
                  min = "1"
                  @focus="focus('faceWidth')"
                  @change="changeValue('faceWidth')"/>
        <label class="el-form-item__label">mm</label>
      </div>
    </template>
    <template>
      <div v-if="isHelicalGear">
        <!--螺旋方向-->
        <div class="d-flex align-items-center">
          <label class="el-form-item__label">{{$t('message.GearDesignTool.gearHelicalDirection')}}:</label>
        </div>
        <div class="d-flex align-items-center">
          <el-radio v-model="params.helixDirection" :label="'leftHelix'">{{$t('message.GearDesignTool.gearLeftHelix')}}</el-radio>
          <el-radio v-model="params.helixDirection" :label="'rightHelix'">{{$t('message.GearDesignTool.gearRightHelix')}}</el-radio>
        </div>
        <!--分度圆螺旋角b（度数）-->
        <div class="d-flex align-items-center">
          <label class="el-form-item__label">{{$t('message.GearDesignTool.gearHelixAngle')}}:</label>
          <el-input v-model="params.helixAngle"
                    type = "number"
                    step = "1"
                    min = "8"
                    max = "75"
                    @focus="focus('helixAngle')"
                    @change="changeValue('helixAngle')"/>
          <label class="el-form-item__label">°</label>
        </div>
      </div>
    </template>
    <div class="btn">
      <el-button
          type="primary"
          size="small"
          :disabled="false"
          @click="confirm">
        {{ $t('message.GearDesignTool.confirm') }}
      </el-button>
      <el-button
          size="small"
          @click="close">
        {{ $t('message.GearDesignTool.cancel') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import DialogMixin from "../DialogMixin";
import {gearDesignCommand} from "../../../Command/GearDesignCommand";
import {GearParams} from "./GearParams";

export default {
  mixins: [DialogMixin],
  name: "CmdCylindricalGearDesign",
  data() {
    return {
      params: {
        gearType: 0, // 齿轮类型
        module: 2.5,
        teethNumber: 20,
        teethNumberMin: 5,
        pressureAngle: 20,
        pressureAngleMin: 10,
        faceWidth: 10,
        faceWidthMin: 1,
        helixDirection: 'leftHelix',
        helixAngle: 15,
        helixAngleMin: 8,
	      helixAngleMax: 75
      },

      // 模数值列表
      classParamsGearModule:[
        {text:"1", value: 1},
        {text:"1.125", value: 1.125},
        {text:"1.25", value: 1.25},
        {text:"1.375", value: 1.375},
        {text:"1.5", value: 1.5},
        {text:"1.75", value: 1.75},
        {text:"2", value: 2},
        {text:"2.25", value: 2.25},
        {text:"2.5", value: 2.5},
        {text:"2.75", value: 2.75},
        {text:"3", value: 3},
        {text:"3.5", value: 3.5},
        {text:"4", value: 4},
        {text:"4.5", value: 4.5},
        {text:"5", value: 5},
        {text:"5.5", value: 5.5},
        {text:"6", value: 6},
        {text:"7", value: 7},
        {text:"8", value: 8},
        {text:"9", value: 9},
        {text:"10", value: 10},
        {text:"11", value: 11},
        {text:"12", value: 12},
        {text:"14", value: 14},
        {text:"16", value: 16},
        {text:"18", value: 18},
        {text:"20", value: 20},
        {text:"22", value: 22},
        {text:"25", value: 25},
        {text:"28", value: 28},
        {text:"32", value: 32},
        {text:"36", value: 36},
        {text:"40", value: 40},
        {text:"45", value: 45},
        {text:"50", value: 50},
      ],

      // 齿轮类型列表
      gearOptions: [
        {text: this.$t("message.GearDesignTool.CylindricalSpurGear"), value: 0},
        {text: this.$t("message.GearDesignTool.CylindricalHelicalGear"), value: 1},
      ],
      originValue: 1,
    };
  },

  mounted() {
    gearDesignCommand.init(400,250,200,() => {

    });
  },

  methods: {
    changePluginContainerHeight() {
      gearDesignCommand.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight});
    },
    focus(name) {
      this.originValue = this.params[name];
    },
    changeValue(name) {
      let value = this.params[name];
      let valueMin = this.params[name + 'Min'];
      if (value < valueMin) {
        this.params[name] = valueMin;
      }
      if(name === 'helixAngle') {
        let valueMax = this.params[name + 'Max'];
        if (value > valueMax) {
          this.params[name] = valueMax;
        }
      }
    },
    confirm() {
      //关闭右侧窗口
      gearDesignCommand.setPluginRightNavigation();
      if (this.params.gearType === 0) { // 柱正齿轮
        const spurGearParams = new GearParams(this.params.teethNumber, this.params.module, this.params.pressureAngle,
            this.params.faceWidth, this.params.helixDirection, 0);
        let status = spurGearParams.analysisGearParams();
        if(!status) {
          let msg = "参数计算错误，请检查输入数据";
          gearDesignCommand.eventBusAlertMsg(msg, 'warning');
          return;
        }
        // 进度开始
        gearDesignCommand.openLoading(this.$t('message.GearDesignTool.loading'));
        gearDesignCommand.createSpurGear(spurGearParams, () => {
          // 进度结束
          gearDesignCommand.closeLoading();
        });
      } else if (this.params.gearType === 1) { // 柱斜齿轮
        const helixGearParams = new GearParams(this.params.teethNumber, this.params.module, this.params.pressureAngle,
            this.params.faceWidth, this.params.helixDirection, this.params.helixAngle);
        let status = helixGearParams.analysisGearParams();
        if(!status) {
          let msg = "参数计算错误，请检查输入数据";
          gearDesignCommand.eventBusAlertMsg(msg, 'warning');
          return;
        }
        // 进度开始
        gearDesignCommand.openLoading(this.$t('message.GearDesignTool.loading'));
        gearDesignCommand.createHelixGear(helixGearParams, () => {
          // 进度结束
          gearDesignCommand.closeLoading();
        });
      }
    },

    close() {
      gearDesignCommand.closeActiveCmd();
    },
  },

  computed: {
    isHelicalGear() {
      return this.params.gearType === 1;
    },
  },

};
</script>
<style scoped>
.wrap {
  font-size: 12px;
}

</style>
